<template>
    <div>
        <h3>登录</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">用户名</td>
                    <td>
                        <input type="text" v-model="info.userName">
                    </td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td>
                        <input type="password" v-model="info.userPwd">
                    </td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td>
                        <input type="password" v-model="info.userPwd1">
                    </td>
                </tr>
                <tr>
                    <td align="right">昵称</td>
                    <td>
                        <input type="text" v-model="info.nickName">
                    </td>
                </tr>
                <tr>
                    <td align="right">性别</td>
                    <td>
                        <input type="radio" name="gender" :value="1" v-model="info.gender">男
                        <input type="radio" name="gender" :value="0" v-model="info.gender">女
                    </td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" name="state" :value="1" v-model="info.state">冻结
                        <input type="radio" name="state" :value="0" v-model="info.state">解冻
                    </td>
                </tr>
                <tr>
                    <td align="right">身份证照片</td>
                    <td>
                        <input type="file" @change="Imgs">
                        <img :src="info.cardPhoto" v-if="info.cardPhoto != ''" width="50" height="50">
                    </td>
                </tr>
                <tr>
                    <td align="right">头像</td>
                    <td>
                        <input type="file" @change="Imgs2">
                        <img :src="info.photo" v-if="info.photo != ''" width="50" height="50">
                    </td>
                </tr>
                <tr>
                    <td align="right">手机号</td>
                    <td>
                        <input type="text" v-model="info.tel" maxlength="11">
                    </td>
                </tr>
                <tr>
                    <td align="right">生日</td>
                    <td>
                        <input type="date" v-model="info.birthDay">
                    </td>
                </tr>
                <tr>
                    <td align="right">简介</td>
                    <td>
                        <textarea rows="5" cols="50" v-model="info.desc">

                        </textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">角色</td>
                    <td>
                        <select v-model="info.roleId">
                            <option value="">请选择</option>
                            <option v-for="item in bang" :value="item.roleId">{{ item.roleName }}</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加" class="btn btn-primary" @click="add">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { useStore } from '@/stores/User'
const abc = useStore();
const router = useRouter()
const route = useRoute()
//接收数据
let info: any = reactive({
    "userName": "",
    "userPwd": "",
    "nickName": "",
    "gender": '',
    "state": '',
    "cardPhoto": "",
    "photo": "",
    "tel": "",
    "birthDay": "",
    "desc": "",
    "roleId": '',
    "userPwd1": ''
})
onMounted(() => {
    if (abc.userinfo.userName) {
        BangShow();
    }
    else {
        router.push('/login')
    }
})
let bang: any = ref([])
const BangShow = () => {
    axios({
        url: '/api/Admin/GetRoleModels',
        method: 'get',
    })
        .then((res) => {
            console.log(res);
            bang.value = res.data
        })
        .catch((err) => {
            console.log(err);
        })
}
const add = () => {
    if (info.userPwd == '') {
        alert('密码不能为空')
        return
    }
    if (info.userPwd1 == '') {
        alert('确认密码不能为空')
        return
    }
    if (info.userPwd != info.userPwd1) {
        alert('俩次密码不一致')
        return
    }
    if (info.tel == '') {
        alert('手机号不能为空')
        return
    }
    if (info.desc == '') {
        alert('简介不能为空')
        return
    }
    axios({
        url: '/api/Admin/AddAdmin',
        method: 'post',
        data: info
    })
        .then((res) => {
            console.log(res);
            if (res.data > 0) {
                alert('添加成功')
                router.push('/usershow')
            }
            else {
                alert('添加失败')
                return
            }
        })
        .catch((err) => {
            console.log(err);
        })
}
const Imgs = (e: any) => {
    let obj = e.target.files[0]
    let f = new FormData()
    f.append("file", obj)
    axios({
        url: '/api/Admin/Img',
        method: 'post',
        data: f
    })
        .then((res) => {
            console.log(res);
            if (res.data == '不是图片') {
                alert('不是图片')
                return
            }
            if (res.data == '大于2M') {
                alert('大于2M')
                return
            }
            info.cardPhoto = res.data
        })
        .catch((err) => {
            console.log(err);
        })
}
const Imgs2 = (e: any) => {
    let obj = e.target.files[0]
    let f = new FormData()
    f.append("file", obj)
    axios({
        url: '/api/Admin/Img',
        method: 'post',
        data: f
    })
        .then((res) => {
            console.log(res);
            if (res.data == '不是图片') {
                alert('不是图片')
                return
            }
            if (res.data == '大于2M') {
                alert('大于2M')
                return
            }
            info.photo = res.data
        })
        .catch((err) => {
            console.log(err);
        })
}
</script>

<style scoped></style>